class Vue {
    constructor(options) {
        this.$el = options.el;//模板 app
        this.$data = options.data || {};//数据  data
        if (this.$el) {//dom节点
            //进行模板的编译 最终吧数据展示到页面上
            new Comlie(this.$el, this)
        }
    }
}
class Comlie {
    constructor(el, vm) {//el === > app  vm =>>实例
        this.vm = vm;
        //元素节点 或字符串
        this.el = this.isFlementNode(el) ? this.el : document.querySelector(el);
        //把所有的元素存放内存中
        let fragment = this.nodeToFragment(this.el)
        console.log(fragment, '2222222');

        //编辑模板 数据
        this.complie(fragment);
        this.el.appendChild(fragment)
    }
    isFlementNode(node) {
        //nodeType 返回节点的类型 1.元素节点 2.属性节点 3.文本节点 8.注释节点
        //传过来的el是否  是 元素节点
        return node.nodeType === 1
    }
    nodeToFragment(node) {//node === > app
        //createDocumentFragment:创建一个新的空白文档片段
        let fragment = document.createDocumentFragment()
        let firstChild;
        // console.dir()可以显示一个对象的所有属性和方法
        console.dir(node)
        console.log(node.firstChild,'3333333');

        //   firstChild ===> undefined  node.firstChild ==> null
        while (firstChild = node.firstChild) {
            console.log('1111')
            fragment.appendChild(firstChild)
        }
        return fragment//存放片段 为 app内所有的元素节点
    }
    complie(node){
        console.log(node,'123')
        let childNodes = node.childNodes;
        [...childNodes].forEach(child=>{
            if(this.isFlementNode(child)){ //是否是元素节点
                console.log(child)
                //元素节点 编辑
                this.complieElement(child);
            }else{
                //文本 编辑
                this.complieText(child)
            }
        })
    }
    complieElement(node){
        console.log(node.attributes,'------------')
    }
    complieText(node){
        console.log(node,'++++++++++')
    }
}